<template>
    <div class="backgroundColor container fixed">
      <Header content="我的" :showBack="false" :background="{background:'#292a3a'}"></Header>
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        height="-100"
        lock-x
        ref="scrollerMy"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
        style="color: #000;"
      >
        <div>
          <div class="myTop">
            <div class="flexLeft">
              <img src="../../assets/img/user.png" alt="" class="headImg">
              <div style="margin-left:12px;">
                <div class="name font15">
                  <span>{{userInfo.nickname}}</span>
                </div>
                <div class="lastMoney font13">
                  <span>余额：</span>
                  <span>{{userInfo.balance}}</span>
                  <span>USDT</span>
                </div>
                <div class="lastMoney font13">
                  <span>推荐人：{{userInfo.recommender}}</span>
                </div>
              </div>
            </div>
          </div>
          <ul class="myBottomUl">
            <li class="flex" @click="goTo({name:'myChargeRecord'})">
              <div class="flexLeft">
                <img src="../../assets/img/ctjl.png" alt="" class="imgBottomList">
                <div>
                  充提记录
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goTo({name:'donationRecord'})">
              <div class="flexLeft">
                <img src="../../assets/img/tzjl.png" alt="" class="imgBottomList">
                <div>
                  捐助记录
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goTo({name:'gainRecord'})">
              <div class="flexLeft">
                <img src="../../assets/img/fenhong.png" alt="" class="imgBottomList">
                <div>
                  分红记录
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goTo({name:'noticeList'})">
              <div class="flexLeft">
                <img src="../../assets/img/ggjl.png" alt="" class="imgBottomList">
                <div>
                  公告记录
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goTo({name:'rules'})">
              <div class="flexLeft">
                <img src="../../assets/img/xsxz.png" alt="" class="imgBottomList">
                <div>
                  新手须知
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goTo({name:'mySafe'})">
              <div class="flexLeft">
                <img src="../../assets/img/aqsz.png" alt="" class="imgBottomList">
                <div>
                  安全设置
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goToDown">
              <div class="flexLeft">
                <img src="../../assets/img/aqsz.png" alt="" class="imgBottomList">
                <div>
                  下载app
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
            <li class="flex" @click="goTo({name:'contact'})">
              <div class="flexLeft">
                <img src="../../assets/img/aqsz.png" alt="" class="imgBottomList">
                <div>
                  联系客服
                </div>
              </div>
              <x-icon type="ios-arrow-right"></x-icon>
            </li>
          </ul>
          <div style="margin:28px 17px 0 17px;" class="login">
            <x-button type="primary" @click.native="loginOut">退出登录</x-button>
          </div>
        </div>
      </scroller>

    </div>
</template>
<script>
  import Header from '../common/header.vue'
  import {Scroller} from 'vux'
  export default{
    data(){
      return {
        showContent:false,
        userInfo:{},
        setPwdStatus:'设置资金密码',
        currencyList:[],
        onFetching1:false,
        onFetching:false,
        currencyInfo:''
      }
    },
    methods:{
      onScrollBottom(){
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          this.handle()
        }
      },
      loginOut(){
        this.service('logout',{}).then(res=>{
          localStorage.clear();
          this.$router.push('/login');
        })
      },
      goTo(path){
        this.$router.push(path)
      },
      goToDown(){
        window.location.href = "/download.html?from=app";
      },
      handle(){
        this.$store.dispatch('info').then(res=>{
          this.userInfo = JSON.parse(localStorage.getItem('userinfo'));
          this.$nextTick(()=>{
            this.$refs.scrollerMy.donePulldown();
            this.$refs.scrollerMy.disablePullup();
          })
          this.onFetching1 = false;
          this.onFetching = false;
        })
      },
      onScrollTop(){
        var that = this;
        if (this.onFetching1) {} else {
          this.onFetching1 = true;
          this.handle();

        }
      }
    },
    created(){
      this.onScrollTop()

    },
    components:{
      Header,Scroller
    }
  }
</script>
<style>
  .headImg{
    width:48px;
    height: 48px;
    border-radius: 50%;
  }
  .myTop{
    padding:30px 12px 30px;
  }
  .name{
    color: #FFFFFF;
  }
  .lastMoney{
    color: #BBBBC0;
  }
  .numColor{
    color: #222222;
    font-weight: 500;
  }
  .imgList{
    width:32px;
  }
  .vux-x-icon{
    fill:#DCDCDC;
  }
  .imgBottomList{
    width:22px;
    margin-right: 10px;
  }
  .myBottomUl{
    color:#FFFFFF;
    padding-bottom: 28px;
  }
  .myBottomUl li:nth-of-type(1){
    border-top: 1px solid #3A3A47;
  }
  .myBottomUl li{
    height:60px;
    border-bottom: 1px solid #3A3A47;
    padding:0 15px;
    font-size: 15px;
  }
</style>
